import React, { Component } from 'react';
import {
    HashRouter,
    Switch,
    Route,
    Link
} from "react-router-dom"
//ui组件引用
import "antd/dist/antd.css";
import { Layout, Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
//嵌套路由引入
import Student from "./Student";
import Teacher from "./Teacher";
import Assistant from "./Assistant";

const { Header, Sider, Content } = Layout;

class Home extends Component {
    constructor(props) {
        super(props)
    }


    render() {
        return (
            <HashRouter>
                <div className="Home">
                    <Layout>
                        <Header className="header">
                            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['3']}
                                onClick={(object) => {
                                    // console.log(key)
                                    if (object.key === "1") {
                                        this.props.history.push("/about")
                                    } else if (object.key === "2") {
                                        this.props.history.push("/main")
                                    }
                                }}>
                                <Menu.Item key="1">About</Menu.Item>
                                <Menu.Item key="2">Main</Menu.Item>
                                <Menu.Item key="3">Home</Menu.Item>
                            </Menu>
                        </Header>
                        <Layout>
                            <Sider width={200} className="site-layout-background">
                                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                                    <Menu.Item key="1" icon={<PieChartOutlined />}>
                                        <Link to="/">学生管理</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2" icon={<PieChartOutlined />}>
                                        <Link to="/teacher">讲师管理</Link>
                                    </Menu.Item>
                                    <Menu.Item key="3" icon={<PieChartOutlined />}>
                                        <Link to="/assistant">助教管理</Link>
                                    </Menu.Item>
                                </Menu>
                            </Sider>
                            <Layout>
                                <Content
                                    className="site-layout-background"
                                    style={{
                                        padding: 24,
                                        margin: 0,
                                        minHeight: 280,
                                    }}
                                >
                                    <Switch>

                                        <Route path="/teacher" component={Teacher} />
                                        <Route path="/assistant" component={Assistant} />
                                        <Route path="/" component={Student} />
                                    </Switch>
                                </Content>
                            </Layout>
                        </Layout>
                    </Layout>
                </div>
            </HashRouter>
        );
    }



}

export default Home;
